<template>
  <!-- <div ref="container">
    <div class="collectionGoods" v-if="collectProductList.length > 0">
      <router-link
        :to="{ path: '/detail/' + item.pid }"
        class="item acea-row row-between-wrapper"
        v-for="(item, index) in collectProductList"
        :key="index"
      >
        <div class="pictrue"><img :src="item.image" /></div>
        <div class="text acea-row row-column-between">
          <div class="infor line1">{{ item.store_name }}</div>
          <div class="acea-row row-between-wrapper">
            <div class="money font-color-red">￥{{ item.price }}</div>
            <div class="delete" @click.prevent="delCollection(index)">删除</div>
          </div>
        </div>
      </router-link>
    </div>
    <Loading :loaded="loadend" :loading="loading"></Loading>
    <div
      class="noCommodity"
      style="background-color:#fff;"
      v-if="collectProductList.length < 1 && page > 1"
    >
      <div class="noPictrue">
        <img src="@assets/images/noCollection.png" class="image" />
      </div>
      <Recommend></Recommend>
    </div>
  </div> -->
  <el-container>
    <el-header height="172px" style="padding:0 0;">
        <HomeNavigation></HomeNavigation>
        <SearchBox></SearchBox>
        <ClassNavigation></ClassNavigation>
    </el-header>
    <el-container class="goods">
      <el-container style="width:1090px;margin:20px auto 0;">
          <el-aside width="180px">
              <div class="side">
                <el-menu
                default-active="1-4"
                active-text-color="#b4a078"
                @open="handleOpen"
                @close="handleClose">
                  <el-menu-item-group>
                    <p slot="title" class="sideTitle">我的服务</p>
                    <el-menu-item index="1-1">
                       <router-link to="/user">
                        <p class="sideIetm">个人中心</p>
                      </router-link>
                      </el-menu-item>
                    <el-menu-item index="1-2">
                      <router-link to="/user/vip">
                        <p class="sideIetm">会员中心</p>
                      </router-link>
                    </el-menu-item>
                    <el-menu-item index="1-3">
                      <router-link to="/user/add_manage">
                        <p class="sideIetm">地址信息</p>
                      </router-link>
                    </el-menu-item>
                    <el-menu-item index="1-4">
                      <router-link to="/collection">
                      <p class="sideIetm">我的收藏</p>
                      </router-link>
                      </el-menu-item>
                    <el-menu-item index="1-5">
                        <router-link to="/user/user_coupon">
                          <p class="sideIetm">优惠券</p>
                        </router-link>
                    </el-menu-item>
                  </el-menu-item-group>
                  <el-menu-item-group>
                    <p slot="title" class="sideTitle">订单管理</p>
                    <el-menu-item index="2-1">
                      <router-link to="/order/list/0">
                        <p class="sideIetm">我的订单</p>
                      </router-link>
                    </el-menu-item>
                    <el-menu-item index="2-2"><router-link to="/order/refund_list"> 
                      <p class="sideIetm">售后/退款</p>
                    </router-link></el-menu-item>
                  </el-menu-item-group>
              </el-menu>
            </div>
          </el-aside>
        <el-main style="padding: 20px 0 20px 20px;">
          <div class="main">
            <div class="title">商品收藏</div>
            <div class="itemList acea-row">
              <div class="item"  v-for="(item, index) in collectProductList" :key="index" v-if="collectProductList.length > 0">
                  <router-link
                    :to="{ path: '/detail/' + item.pid }"
                  >
                    <el-card :body-style="{ padding: '0px' }" shadow="hover">
                        <img :src="item.image" class="image">
                        <div class="bd">
                          <div class="name"><p >{{ item.store_name }}</p></div>
                          <div class="price">¥{{ item.price }}</div>
                        </div>
                        <div class="btnGroup">
                            <el-button size="mini"  @click.prevent="delCollection(index)" class="btn"><p >取消收藏</p></el-button>
                        </div>
                      </el-card>
                  </router-link>
              </div>
              <div class="noGoods acea-row row-center-wrapper" v-if="collectProductList.length < 1 && page > 1">
                  
                  <img src="@assets/images/noCollection.png" alt="" class="n-image">
              </div>
            </div>
          </div>
        </el-main>
      </el-container>
      <el-footer style="padding:0;">
        <Foot></Foot>
      </el-footer>
    </el-container>
</el-container>
</template>
<script>
import Recommend from "@components/Recommend";
import { getCollectUser, getCollectDel } from "@api/user";
import Loading from "@components/Loading";
import HomeNavigation from "@components/HomeNavigation";
import ClassNavigation from "@components/ClassNavigation";
import SearchBox from "@components/SearchBox";
import Foot from "@components/Foot";

export default {
  name: "GoodsCollection",
  components: {
    Recommend,
    Loading,
    HomeNavigation,
    ClassNavigation,
    SearchBox,
    Foot
  },
  props: {},
  data: function() {
    return {
      page: 1,
      limit: 20,
      collectProductList: [],
      loadTitle: "",
      loading: false,
      loadend: false
    };
  },
  mounted: function() {
    this.get_user_collect_product();
    this.$scroll(this.$refs.container, () => {
      !this.loading && this.get_user_collect_product();
    });
  },
  methods: {
    get_user_collect_product: function() {
      let that = this;
      if (that.loading) return; //阻止下次请求（false可以进行请求）；
      if (that.loadend) return; //阻止结束当前请求（false可以进行请求）；
      that.loading = true;
      getCollectUser(that.page, that.limit).then(res => {
        that.loading = false;
        //apply();js将一个数组插入另一个数组;
        that.collectProductList.push.apply(that.collectProductList, res.data);
        that.loadend = res.data.length < that.limit; //判断所有数据是否加载完成；
        that.page = that.page + 1;
      });
    },
    //删除收藏；
    delCollection: function(index) {
      let that = this,
        id = that.collectProductList[index].pid,
        category = that.collectProductList[index].category;
      getCollectDel(id, category).then(function() {
        that.$dialog.toast({
          mes: "删除收藏成功!",
          callback: () => {
            that.collectProductList.splice(index, 1);
            that.$set(that, "collectProductList", that.collectProductList);
          }
        });
      });
    }
  }
};
</script>

<style scoped>
  .goods {
    background-color: #ffffff;
  }
  .side {
    border: 1px solid #eaeaea;
    height:510px;
    padding-top: 24px;
    margin-top: 20px;
  }
  .side .sideTitle {
    font-size: 16px;
    color: #333;
    font-weight: 700;
    padding-left: 23px;
  }

   .side .sideIetm {
    font-size: 14px;
    padding-left: 23px;
  }
  .main {
    width: 890px;
    border: 1px solid #eaeaea;
  }
  .main .title {
    width: 888px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #e8e8e8;
    height: 42px;
    line-height: 41px;
    font-size: 14px;
    padding-left: 21px;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    color: #333;
  }
  .main .itemList {
    width: 888px;
    padding: 20px 24px 40px;
  }
  .main .itemList .noGoods {
    width: 890px;
    height: 532px;
  }
  .main .itemList .noGoods .n-image {
    width: 414px;
    height: 336px;
    margin:0 auto  ;
  }
  .main .itemList .noGoods .n-image .image-slot {
    background-color: #F5F7FA;
  }
  .main .itemList .noGoods .n-image .image-font {
    font-size: 50px;
    width: 414px;
    text-align: center;
    line-height: 336px;
    background-color: #F5F7FA;
  }
  .main .itemList .item {
    width: 210px;
    height: 330px;
    margin-bottom: 20px;
    padding: 0 4px;
  }
  .main .itemList .item .image {
    width: 200px;
    height: 200px;
  }
  c{
    width: 200px;
    height: 89px;
  }
  .main .itemList .item .bd .name {
    width: 166px;
    margin: 0 17px 4px ;
    max-height: 40px;
  }
  .main .itemList .item .bd .name  p {
    text-overflow: ellipsis;
    max-height: 40px;
    line-height: 20px;
    max-height: 40px;
    overflow: hidden;
    text-align: center;
    font-size: 14px;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    font-weight: 700;
  }
  .main .itemList .item .bd .price {
    height: 22px;
    line-height: 20px;
    text-align: center;
    color: #d4282d;
    font-size: 14px;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
  }
  .main .itemList .item .btnGroup {
    width: 180px;
    height: 29px;
    margin-top: 6px;
    margin: 0 auto;
    margin-bottom: 20px;
  }
  .main .itemList .item .btnGroup .btn {
    margin-left: 38px;
  }
  .main .itemList .item .btnGroup .btn p {
    padding: 0 12px;
    line-height: 13px;
  }
</style>
